<template>
  <BaseDialog v-model="dialogVisible" :title="title" :width="700" :before-close="handleClose">
    <el-form ref="refDialogForm" class="set-dialog-form" :label-width="language === 'en' ? '180px' : '80px'"
      :model="formData" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('public.date')" prop="tripDate" required>
            <Date v-model="formData.tripDate" style="width: 100%" :default-time="new Date(2025, 1, 1)"
              :label="$t('public.date')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('travelAgency.tripDay')" required prop="tripDay">
            <TextInput v-model="formData.tripDay"
              :placeholder="$t('public.pleaseInput') + $t('travelAgency.tripDay')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.trip')" required prop="trip">
            <TextInput v-model="formData.trip" type="textarea" clearable :rows="3"
              :placeholder="$t('public.pleaseInput') + $t('travelAgency.trip')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.meal')">
            <TextInput v-model="formData.meal" :placeholder="$t('public.pleaseInput')  + $t('public.desc')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.hotel')">
            <TextInput v-model="formData.hotel" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.car')">
            <TextInput v-model="formData.car" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.play')">
            <TextInput v-model="formData.play" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.shop')">
            <TextInput v-model="formData.shop" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.enjoy')">
            <TextInput v-model="formData.enjoy" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.other')">
            <TextInput v-model="formData.other" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
          }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
          }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  },
  editData: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() =>
  props.type === 'add' ? g_t('public.create') : g_t('public.edit')
)

const refDialogForm = ref(null)
const formData = ref({
  "tripDate": "",
  "tripDay": "",
  "trip": "",
  "meal": "",
  "hotel": "",
  "car": "",
  "play": "",
  "shop": "",
  "enjoy": "",
  "other": "",
  "rowId": ""
})

const rules = {
  tripDate: g_rules.selectRule(g_t('public.date')),
  tripDay: g_rules.commonInputText(g_t('travelAgency.tripDay')),
  trip: g_rules.commonInputText(g_t('travelAgency.trip'))
}

onMounted(async () => {
  if (props.type === 'add') {
    formData.value = {
      "tripDate": "",
      "tripDay": "",
      "trip": "",
      "meal": "",
      "hotel": "",
      "car": "",
      "play": "",
      "shop": "",
      "enjoy": "",
      "other": "",
      "rowId": ""
    }
  } else {
    getFormData(props.editData)
  }
})

const getFormData = (row) => {
  // 转换数据
  formData.value = {
    tripDate: row.tripDate || '',
    tripDay: row.tripDay || '',
    trip: row.trip || '',
    meal: row.meal || '',
    hotel: row.hotel || '',
    car: row.car || '',
    play: row.play || '',
    shop: row.shop || '',
    enjoy: row.enjoy || '',
    other: row.other || '',
    rowId: row.rowId || ''
  }
}

const handleClose = () => {
  dialogVisible.value = false
}


const handleSubmitForm = () => {
  refDialogForm.value.validate(valid => {
    if (!valid) return

    // 为新增的数据生成不重复的rowId
    if (props.type === 'add') {
      // 生成一个基于时间戳和随机数的唯一ID
      formData.value.rowId = 'row_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)

      console.log('表单数据', formData.value)

      ElMessage({
        message: g_t('public.add') + g_t('public.success'),
        type: 'success'
      })
      handleClose()
      emit('add', formData.value)
    } else {
      console.log('表单数据', formData.value)
      ElMessage({
        message: g_t('public.edit') + g_t('public.success'),
        type: 'success'
      })
      handleClose()
      emit('update', formData.value)
    }
  })
}
</script>

<style scoped lang="scss"></style>
